<template>
  <h1 class="row-title">不同方向</h1>
  <div class="row">
    <ct-tooltip content="this is test" placement="top" @visible-change="handlerVisibleChange">
      <ct-button type="primary">TOP</ct-button>
    </ct-tooltip>

    <ct-tooltip content="this is test" placement="bottom" @visible-change="handlerVisibleChange">
      <ct-button type="info">BOTTOM</ct-button>
    </ct-tooltip>

    <ct-tooltip content="this is test" placement="left" @visible-change="handlerVisibleChange">
      <ct-button type="danger">LEFT</ct-button>
    </ct-tooltip>

    <ct-tooltip content="this is test" placement="right" @visible-change="handlerVisibleChange">
      <ct-button type="error">RIGHT</ct-button>
    </ct-tooltip>
  </div>
  <h1 class="row-title">切换触发模式</h1>
  <div class="row">
    <ct-tooltip
      content="this is test"
      placement="top"
      trigger="click"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="primary">TOP</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      trigger="click"
      placement="bottom"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="info">BOTTOM</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      trigger="click"
      placement="left"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="danger">LEFT</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      trigger="click"
      placement="right"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="error">RIGHT</ct-button>
    </ct-tooltip>
  </div>

  <h1 class="row-title">手动触发</h1>
  <div class="row">
    <ct-tooltip
      ref="tooltipRef"
      content="this is test"
      placement="top"
      manual
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="primary">TOP</ct-button>
    </ct-tooltip>
  </div>
  <div class="row">
    <ct-button type="info" plain @click="handlerTrigger">手动触发</ct-button>
  </div>

  <h1 class="row-title">延时触发</h1>
  <div class="row">
    <ct-tooltip
      content="this is test"
      placement="top"
      :openDelay="1000"
      :closeDelay="4000"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="primary">TOP</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      placement="bottom"
      :openDelay="2000"
      :closeDelay="3000"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="info">BOTTOM</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      placement="left"
      :openDelay="3000"
      :closeDelay="2000"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="danger">LEFT</ct-button>
    </ct-tooltip>

    <ct-tooltip
      content="this is test"
      placement="right"
      :openDelay="4000"
      :closeDelay="1000"
      @visible-change="handlerVisibleChange"
    >
      <ct-button type="error">RIGHT</ct-button>
    </ct-tooltip>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const handlerVisibleChange = (visible) => {
  console.log(visible)
}

const tooltipRef = ref(null)

let triggerFlag = ref(false)
const handlerTrigger = () => {
  !triggerFlag.value ? tooltipRef.value.open() : tooltipRef.value.close()
  triggerFlag.value = !triggerFlag.value
}
</script>

<style lang="scss" scoped></style>
